<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放大镜效果</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        #left {
            width: 350px;
            border: 1px solid #cccccc;
            margin-left: 20px;
            margin-top: 20px;
        }

        #list {
            margin: 10px 0px;
        }

        #list img {
            margin: 0 8px;
            border: 2px solid transparent;
        }

        /* 高亮小图片样式 */
        #list img.active {
            border: 2px solid red;
        }
        #img{
            position: relative;
        }
        .mask{
            width: 62.5%;
            height: 62.5%;
            position: absolute;
            left: 0;
            top:0;
            background-color: rgba(255, 238, 0, 0.3);
            cursor: move;
            display: none;
        }
        #right{
            background: url(./img/large1.jpg) no-repeat;
            width: 500px;
            height: 500px;
            border: 1px solid #cccccc;
            position: absolute;
            display: none;
        }
    </style>
</head>

<body>
    <div id="left">
        <div id="img">
            <img src="./img/middle1.jpg">
            <div class="mask"></div>
        </div>
        <div id="list" class="flex j-c">
        </div>
    </div>
    <div id="right">
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="../js/bing.js"></script>
    <script>
        let data = [{
            small: './img/small1.jpg',
            middle: './img/middle1.jpg',
            large: './img/large1.jpg'
        }, {
            small: './img/small2.jpg',
            middle: './img/middle2.jpg',
            large: './img/large2.jpg'
        }, {
            small: './img/small3.jpg',
            middle: './img/middle3.jpg',
            large: './img/large3.jpg'
        }, {
            small: './img/small4.jpg',
            middle: './img/middle4.jpg',
            large: './img/large4.jpg'
        }, {
            small: './img/small5.jpg',
            middle: './img/middle5.jpg',
            large: './img/large5.jpg'
        }]
        let index = 0  //当前高亮索引
        //获取小图片
        data.map(r => r.small).forEach((r, i) => {
            //创建一个小图片对象
            let img = $('<img/>').attr('src', r)
            if (i === index) {
                img.addClass('active')
            }
            $("#list").append(img)
        })
        //小图片鼠标进入事件
        $('#list img').mouseenter(function () {
            $(this).addClass('active').siblings('.active').removeClass('active')
            let index = $(this).index()
            $('#img img').attr('src',data[index].middle)
            $('#right').css('background-image',`url(${data[index].large})`)
        })
        //中图片鼠标移动事件
        $('#img').mousemove(function(e){
            let x = e.pageX - $('#left').offset().left - ($('.mask').innerWidth()/2)
            let y = e.pageY - $('#left').offset().top - ($('.mask').innerHeight()/2)
            //最大X轴移动距离
            let maxLeft = $(this).innerWidth()-$('.mask').innerWidth()
            //最大Y轴移动距离
            let maxTop = $(this).innerHeight()-$('.mask').innerHeight()
            //获取过滤过后的X轴距离和Y轴距离
            let r = $.filterLeftAndTop(x,y,maxLeft,maxTop)
            //算出蒙版可移动区域的占比
            let x_p = (r.left / maxLeft * 100) + '%'
            let y_p = (r.top / maxTop * 100) + '%'
            //显示蒙版
            $('.mask').show().css({
                left:r.left+'px',
                top:r.top+'px'
            })
            //显示大图
            $("#right").show().css('background-position',`${x_p} ${y_p}`)
        })
        //中图片鼠标移出事件
        $('#img').mouseleave(function(){
            //隐藏蒙版
            $('.mask').hide()
            //隐藏大图
            $("#right").hide()
        })

        $('#right').css({
            left:$('#left').offset().left+$('#left').innerWidth()+5+'px',
            top:$('#left').offset().top+'px'
        })
    </script>
</body>

</html>